<template>
    <div class="breadCrumb">
        
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.path">{{item.meta.name}}&nbsp;&nbsp;{{separator}}</router-link>
         


    </div>
</template>

<script setup>
import { watchEffect ,toRefs} from 'vue'
//声明props
let props = defineProps({
    data: {
        type: Array,
        default() {
            return []
        }
    },
    separator: {
        type: String,
        default() {
            return '/'
        }
    }

})
watchEffect(() => {
    console.log(props.data)
})
// watch(()=>props.data,(newVal)=>{
//     console.log('new',newVal)
// })

//结构props
let {data,separator} = toRefs(props)
console.log(props)
</script>

<style scoped>
a {
    margin: 0 5px;
    color: hotpink;
}
</style>

